<template>
  <div v-if="isOpen">
    <div>
      <el-button type="primary" @click="addButton">添加课程</el-button>
    </div>
    <el-table :data="courses.filter((data) => !search || data.Name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
      <el-table-column label="名称" prop="Name" sortable> </el-table-column>
      <el-table-column label="类型" prop="Class" sortable> </el-table-column>
      <el-table-column label="学分" prop="Credit" sortable> </el-table-column>
      <el-table-column label="周几" prop="Day" sortable> </el-table-column>
      <el-table-column label="第几节" prop="Time" sortable> </el-table-column>
      <el-table-column label="上课学期" prop="Term" sortable> </el-table-column>
      <el-table-column label="上限人数" prop="Max" sortable> </el-table-column>
      <el-table-column align="right">
        <!-- eslint-disable -->
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入课程名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="info" :disabled="buttonDisable" @click="updateCourse(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" :disabled="buttonDisable" @click="deleteCourse(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="课程操作" :visible.sync="formVisible" width="50%">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="名称">
          <el-input v-model="form.name" style="width: 300px" :disabled="this.inputDisable"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.class" placeholder="请选择课程类型">
            <el-option label="思政1" value="思政1"></el-option>
            <el-option label="人文1" value="人文1"></el-option>
            <el-option label="人文2" value="人文2"></el-option>
            <el-option label="专业1" value="专业1"></el-option>
            <el-option label="专业2" value="专业2"></el-option>
            <el-option label="专业3" value="专业3"></el-option>
            <el-option label="体育1" value="体育1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分">
          <el-input-number v-model="form.credit" :precision="0" :min="1" :max="7" label="学分"></el-input-number>
        </el-form-item>
        <el-form-item label="周几">
          <el-input-number v-model="form.day" :precision="0" :min="1" :max="7" label="周几"></el-input-number>
        </el-form-item>
        <el-form-item label="第几节">
          <el-input-number v-model="form.time" :precision="0" :min="1" :max="4" label="第几节"></el-input-number>
        </el-form-item>
        <el-form-item label="上课学期">
          <el-input-number v-model="form.term" :precision="0" :min="1" :max="8" label="上课学期"></el-input-number>
        </el-form-item>
        <el-form-item label="上限人数">
          <el-input-number v-model="form.max" :precision="0" :min="1" :max="180" label="上限人数"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div v-else>
    <p>未在规定时间，不能操作！操作时间为{{ startTime }} - {{ endTime }}</p>
  </div>
</template>

<script>
export default {
  props: ['courseList'],
  name: 'TeacherAction',
  data() {
    return {
      ID: '',
      isOpen: true,
      startTime: '',
      endTime: '',
      courses: [],
      buttonDisable: false,
      formVisible: false,
      inputDisable: false,
      search: '',
      form: {
        name: '',
        class: '思政1',
        credit: 1,
        day: 1,
        time: 1,
        term: 5,
        max: 2
      }
    }
  },
  methods: {
    async onSubmit() {
      const info = {
        name: '名称',
        class: '类型',
        credit: '学分',
        day: '周几',
        time: '第几节',
        term: '上课学期',
        max: '上限人数'
      }
      for (const item in this.form) {
        if (!this.form[item]) {
          this.$alert('缺少 "' + info[item] + '" 属性！', '提示信息', {
            confirmButtonText: '确定'
          })
          return false
        }
      }
      for (const item of this.courses) {
        if (this.form.day === item.Day && this.form.time === item.Time) {
          if (this.form.name === item.Name) {
            if (!this.inputDisable) {
              this.$alert('您已经有该课程了！', '提示信息', {
                confirmButtonText: '确定'
              })
              return false
            } else {
              break
            }
          }
          this.$alert('该课程与课程 "' + item.Name + '" 时间冲突！', '提示信息', {
            confirmButtonText: '确定'
          })
          return false
        }
      }
      this.formVisible = false
      if (!this.inputDisable) {
        const { data: res } = await this.$http.post('/opTable', {
          type: 'insert',
          table: 'courses',
          data: {
            Name: this.form.name,
            Class: this.form.class,
            Credit: this.form.credit,
            Day: this.form.day,
            Time: this.form.time,
            Term: this.form.term,
            Max: this.form.max,
            TeacherID: this.ID
          }
        })
        if (res) {
          this.$alert('课程添加成功！', '提示信息', {
            confirmButtonText: '确定'
          })
        } else {
          this.$alert('课程添加失败！', '提示信息', {
            confirmButtonText: '确定'
          })
        }
      } else {
        const { data: res } = await this.$http.post('/opTable', {
          type: 'update',
          table: 'courses',
          data: {
            Name: this.form.name,
            Class: this.form.class,
            Credit: this.form.credit,
            Day: this.form.day,
            Time: this.form.time,
            Term: this.form.term,
            Max: this.form.max,
            TeacherID: this.ID
          }
        })
        if (res) {
          this.$alert('课程修改成功！', '提示信息', {
            confirmButtonText: '确定'
          })
        } else {
          this.$alert('课程修改失败！', '提示信息', {
            confirmButtonText: '确定'
          })
        }
      }
      const { data: courseData } = await this.$http.post('/opTable', { type: 'select', table: 'courses', data: { TeacherID: this.ID } })
      this.courses = courseData
    },
    onCancel() {
      this.formVisible = false
    },
    addButton() {
      this.formVisible = true
      this.inputDisable = false
    },
    async updateCourse(item) {
      this.inputDisable = true
      this.formVisible = true
      this.form.name = item.Name
      this.form.class = item.Class
      this.form.credit = item.Credit
      this.form.day = item.Day
      this.form.time = item.Time
      this.form.term = item.Term
      this.form.max = item.Max
    },
    async deleteCourse(course) {
      this.$confirm('此操作将永久删除课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.buttonDisable = true
          const { data: res1 } = await this.$http.post('/opTable', { type: 'delete', table: 'courses', data: { Name: course.Name, TeacherID: course.TeacherID } })
          const { data: res2 } = await this.$http.post('/opTable', { type: 'delete', table: 'select', data: { Course: course.Name } })
          if (res1 && res2) {
            this.$alert('课程删除成功！', '提示信息', {
              confirmButtonText: '确定'
            })
          } else {
            this.$alert('课程删除失败！', '提示信息', {
              confirmButtonText: '确定'
            })
          }
          const { data: courseData } = await this.$http.post('/opTable', { type: 'select', table: 'courses', data: { TeacherID: this.ID } })
          this.courses = courseData
          this.buttonDisable = false
        })
        .catch((error) => {
          this.$alert('课程删除失败！', error, {
            confirmButtonText: '确定'
          })
        })
    }
  },

  async created() {
    // 获取选课时间，判断是否能进行操作
    this.courses = this.courseList
    const { data: selectTime } = await this.$http.post('/getSelectTime', { type: 'teacher' })
    const time = new Date()
    this.startTime = new Date(selectTime.startTime)
    this.endTime = new Date(selectTime.endTime)
    if (!(time < this.startTime || time > this.endTime)) {
      this.isOpen = true
    } else this.isOpen = false
    this.ID = localStorage.getItem('token').split('/')[1]
  }
}
</script>

<style lang="less" scoped></style>
